import { useState } from 'react'
import { Button } from '@/library/gallery/components/Button'
import Toast from '@/library/gallery/components/Toast'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const DemoToast: React.FC<unknown> = () => {
  const [visible, setVisible] = useState(false)
  const [visible1, setVisible1] = useState(false)
  const [visible2, setVisible2] = useState(false)

  return (
    <div>
      <DemoBlock title="基础用法">
        <Button
          onClick={() => setVisible(true)}
        >
          轻提示
        </Button>
        <Toast
          content={<Button onClick={() => setVisible(false)}>close</Button>}
          visible={visible}
          position="top"
        />
      </DemoBlock>
      <DemoBlock title="显示icon">
        <Button
          onClick={() => setVisible1(true)}
        >
          轻提示
        </Button>
        <Toast
          content="你在左边，我在右边"
          icon="fail"
          visible={visible1}
        />
      </DemoBlock>
      <DemoBlock title="可穿透蒙层">
        <Button
          onClick={() => setVisible2(true)}
        >
          轻提示
        </Button>
        <Toast
          content="轻轻的一个吻 ，已经打动我的心。深深的一段情，叫我思念到如今。"
          icon="success"
          visible={visible2}
          maskClickable
        />
      </DemoBlock>
      <DemoBlock title="关闭上面的toast">
        <Button
          onClick={() => setVisible2(false)}
        >
          关闭
        </Button>
      </DemoBlock>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      {/* <DemoBlock title="基础用法">
        <Button
          onClick={() => setVisible(false)}
        >
          轻提示
        </Button>
        <Toast
          content="声明式"
          visible={visible}
        />
      </DemoBlock> */}
    </div>
  )
}

export default DemoToast
